<template>
  <div class="home">
    <a-input v-model="inputvalue" placeholder="请输入任务" style="width: 20%" @change="handle1"></a-input>
    <a-button type="primary" @click="handle2"> 按钮 </a-button>
    <a-list bordered :dataSource='list' style="width:50%">
      <a-list-item slot="renderItem" slot-scope="item">
         <a-checkbox :checked='item.done' @change="(e)=>{handle5(e,item.id)}">{{item.info}}</a-checkbox>
         <a slot="actions" @click="handle3(item.id)">删除</a>
      </a-list-item>

        <div slot="footer" class="footer">
      <span>{{dwg}}条剩余</span>
      <a-button-group>
        <a-button type='primary'>全部</a-button>
        <a-button>未完成</a-button>
        <a-button>已完成</a-button>
      </a-button-group>
      <a href="">清除已完成</a>
    </div>
    </a-list>
  
  </div>
</template>
<script>
import {mapGetters, mapState} from 'vuex'
export default {
  data() {
    return {
      
    };
  },

  computed:{
    ...mapState(['list','inputvalue']),
    ...mapGetters(['dwg'])
  },
  methods:{
    handle1(e){
      // console.log(e.target.value);
      this.$store.commit('fetchdata',e.target.value)
    },
    handle2(){
      if(this.inputvalue.trim().length<=0) {
        return this.$message.warning('文邦框内容不能为空')
      }
      this.$store.commit('handle3')
    },
    handle3(id){
     this.$store.commit('fetchindex',id)

    },
    handle5(e,id){
    //  this.$store.commit('fetchone',e.target.checked);
    //  console.log(id);
  //    console.log(e.target.checked);
  // console.log(id);
  const pam = {
    id:id,
    done:e.target.checked
  }
  this.$store.commit('fetchone',pam)
    }
  },
  created(){
    this.$store.dispatch('getlist')
  }
};
</script>
